<template>
<!-- 吃货卡类型管理页面 -->
  <div>
    <el-card>
    <!-- 模糊查框 添加按钮 -->
    <div class="abvoeBox">
        吃货卡类型名称:<el-input placeholder="请输入内容" v-model="foodieCardTypeName" class="abvoeBox_input"></el-input>
        <el-button type="primary" @click="selectFoodieCardTypeEntityList()" style="margin-left:10px">查询</el-button>
        <el-button type="success" @click="openSaveFoodieCardTypeEntityDialogVisible()">添加</el-button>
    </div>
    <!-- 全查数据 -->
    <div class="belowBox">
       <el-table
            :data="tableData"
            border
            width=100%
            >
            <el-table-column
            fixed
            prop="foodieCardTypeName"
            label="吃货卡类型">
            </el-table-column>
            <el-table-column
            prop="createTime"
            label="创建时间">
            </el-table-column>
            <el-table-column
            prop="updateTime"
            label="修改时间">
            </el-table-column>
            <el-table-column
            label="操作"
            fixed="right"
            width="300px">
            <template slot-scope="scope">
                <el-button type="primary" size="small" @click="opneUpdateDialogVisible(scope.row)">编辑</el-button>
                <el-button type="danger" size="small" @click="deleteFoodieCardTypeEntityById(scope.row.id)">删除</el-button>
            </template>
            </el-table-column>
        </el-table>
    </div>
    <!-- 分页 -->
    <div style="margin-top: 20px;">
        <template>
            <div class="block">
                <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="5"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
            </div>
        </template>
    </div>
    <!-- 添加弹窗 -->
    <el-dialog
        title="添加"
        :visible.sync="saveFoodieCardTypeEntityDialogVisible"
        :before-close="closeExpertFormDialog"
        width="40%"
        >
        <!-- form表单 -->
        <el-form :model="tableDataForm" ref="ruleForm" :rules="saveRules" label-width="100px" class="demo-ruleForm" style="text-align: left;">
            <el-form-item label="吃货卡类型" prop="foodieCardTypeName">
                <el-input v-model="tableDataForm.foodieCardTypeName" style="width: 200px;"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="resetForm('ruleForm')">取 消</el-button>
            <el-button type="primary" @click="saveFoodieCardTypeEntity('ruleForm')">确 定</el-button>
        </span>
    </el-dialog>
    <!-- 修改弹窗 -->
    <el-dialog
        title="修改"
        :visible.sync="updateFoodieCardTypeEntityDialogVisible"
        :before-close="closeExpertFormDialog"
        width="40%"
        >
        <!-- form表单 -->
        <el-form :model="tableDataForm" ref="ruleForm" :rules="saveRules" label-width="100px" class="demo-ruleForm" style="text-align: left;">
            <el-form-item label="吃货卡类型" prop="foodieCardTypeName">
                <el-input v-model="tableDataForm.foodieCardTypeName" style="width: 200px;"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="resetForm('ruleForm')">取 消</el-button>
            <el-button type="primary" @click="updateFoodieCardTypeEntity('ruleForm')">确 定</el-button>
        </span>
    </el-dialog>
    </el-card>
  </div>
</template>
<script>
export default {
  data () {
    // 表单验证 吃货卡
    const foodieCardTypeName = (rule, value, callback) => {
      debugger
      if (value === '' || value === undefined) {
        callback(new Error('请输入吃货卡类型'))
      } else if (this.updateFoodieCardTypeName === value) {
        callback()
      } else {
        this.$axios.get('http://127.0.0.1:15000/eat-service/foodieCardType/selectFoodieCardTypeEntity?foodieCardTypeName=' + value).then(res => {
          this.selectFoodieCardTypeList = res.data.obj
          if (this.selectFoodieCardTypeList == null) {
            callback()
          } else {
            callback(new Error('该吃货卡类型已录入'))
          }
        })
      }
    }
    return {
      // 表单验证吃货卡类型是否重复
      selectFoodieCardTypeList: {},
      // 表单验证 吃货卡
      updateFoodieCardTypeName: '',
      // 修改弹窗
      updateFoodieCardTypeEntityDialogVisible: false,
      // 添加，修改from规则
      saveRules: {
        foodieCardTypeName: [
          { validator: foodieCardTypeName, trigger: 'blur' }
        ]
      },
      // 添加，修改from
      tableDataForm: {},
      // 添加弹窗
      saveFoodieCardTypeEntityDialogVisible: false,
      // 模糊查询（吃货卡类型）
      foodieCardTypeName: '',
      // 全查吃货卡类型表数据集
      tableData: [],
      // 分页 （pageSize）一页展示5条数据 （pageNum）当前页
      pageRequest: {
        pageSize: 5,
        pageNum: 1
      },
      // 分页 前往第1页
      currentPage: 1,
      // 分页
      total: 0
    }
  },
  mounted () {
    this.selectFoodieCardTypeEntityList()
  },
  methods: {
    // 删除吃货卡类型
    deleteFoodieCardTypeEntityById (data) {
      this.$confirm('此操作将删除该吃货卡类型, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.delete('/eat-service/foodieCardType/deleteFoodieCardTypeEntityById',
          {
            params: {
              id: data
            }
          }).then(res => {
          if (res.status === 200) {
            this.myMessage('success', '删除成功')
            this.selectFoodieCardTypeEntityList()
          } else {
            this.myMessage('warning', '删除失败')
          }
        }).catch(res => {
          this.myMessage('erroe', '删除失败，请联系管理员')
        })
      }).catch(() => {
        this.myMessage('info', '已取消删除')
      })
    },
    // 修改吃货卡类型
    updateFoodieCardTypeEntity (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const formData = new FormData()
          for (const key in this.tableDataForm) {
            formData.set(key, this.tableDataForm[key])
          }
          this.$axios.put('/eat-service/foodieCardType/updateFoodieCardTypeEntity', formData
          ).then(res => {
            debugger
            if (res.data.flag === true) {
              this.myMessage('success', '恭喜你，操作成功！') // 成功提示
              this.updateFoodieCardTypeEntityDialogVisible = false // 关闭窗口
              this.tableDataForm = {
              }
              this.selectFoodieCardTypeEntityList()
            } else {
              this.myMessage('warning', res.data.obj) // 提示消息
            }
          }).catch(error => {
            console.log(error)
            this.myMessage('warning', '对不起，保存失败！')
          })
        } else {
          this.myMessage('warning', '请补全内容')
          return false
        }
      })
    },
    // 打开修改窗口
    opneUpdateDialogVisible (data) {
      this.tableDataForm = JSON.parse(JSON.stringify(data))
      this.updateFoodieCardTypeName = this.tableDataForm.foodieCardTypeName
      this.updateFoodieCardTypeEntityDialogVisible = true
    },
    // 添加吃货卡类型
    saveFoodieCardTypeEntity (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const formData = new FormData()
          for (const key in this.tableDataForm) {
            formData.set(key, this.tableDataForm[key])
          }
          this.$axios.post('/eat-service/foodieCardType/saveFoodieCardTypeEntity', formData
          ).then(res => {
            debugger
            if (res.data.flag === true) {
              this.myMessage('success', '恭喜你，操作成功！') // 成功提示
              this.saveFoodieCardTypeEntityDialogVisible = false // 关闭窗口
              this.tableDataForm = {
              }
              this.selectFoodieCardTypeEntityList()
            } else {
              this.myMessage('warning', res.data.obj) // 提示消息
            }
          }).catch(error => {
            console.log(error)
            this.myMessage('warning', '对不起，保存失败！')
          })
        } else {
          this.myMessage('warning', '请补全内容')
          return false
        }
      })
    },
    // 添加弹窗里的取消按钮 点击取消是清空from表单数据
    resetForm (formName) {
      this.$refs[formName].resetFields()
      this.updateFoodieCardTypeEntityDialogVisible = false
      this.saveFoodieCardTypeEntityDialogVisible = false
    },
    // 添加点击X关闭是清空from表单数据
    closeExpertFormDialog (done) {
      this.$refs.ruleForm.resetFields()
      done()
      // done 用于关闭 Dialog
    },
    // 打开添加弹窗
    openSaveFoodieCardTypeEntityDialogVisible () {
      this.saveFoodieCardTypeEntityDialogVisible = true
      this.tableDataForm = {}
      this.updateFoodieCardTypeName = ''
    },
    // 全查吃货卡类型表（模糊查吃货卡类型）
    selectFoodieCardTypeEntityList () {
      this.$axios.get('/eat-service/foodieCardType/selectFoodieCardTypeEntityList',
        {
          params: {
            foodieCardTypeName: this.foodieCardTypeName,
            pageSize: this.pageRequest.pageSize,
            pageNum: this.pageRequest.pageNum
          }
        }
      ).then(res => {
        this.tableData = res.data.content
        this.total = res.data.total
      }).catch(error => {
        console.log(error)
      })
    },
    // 分页 每页条数
    handleSizeChange (val) {
      this.pageRequest.pageSize = val
      this.selectFoodieCardTypeEntityList()
    },
    // 分页 当前页
    handleCurrentChange (val) {
      this.pageRequest.pageNum = val
      this.selectFoodieCardTypeEntityList()
    },
    // 弹窗提示
    myMessage (type, message) {
      this.$message({
        type: type,
        message: message
      })
    }
  }
}
</script>

<style>
    .abvoeBox{
        width: 100%;
        height: 60px;
        text-align: left;
        margin-top: 5px;
        /* background-color: royalblue; */
        /* position: relative; */
    }
    .abvoeBox_input{
        width: 200px;
        height: 50px;
        margin-left: 10px;
        /* position: absolute; */
    }
    .belowBox{
        margin-top: 20px;
    }
</style>
